<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入subject组件样式 -->
    <link rel="stylesheet" href="../../widget/components/subject/index.css" />
    <!-- 引入radio组件样式 -->
    <link rel="stylesheet" href="../../widget/components/radio/index.css" />
    <!-- 引入checkbox组件样式 -->
    <link rel="stylesheet" href="../../widget/components/checkbox/index.css" />
    <!-- 引入field组件样式 -->
    <link rel="stylesheet" href="../../widget/components/field/index.css" />
    <!-- 引入sheet组件 -->
    <link rel="stylesheet" href="../../widget/components/sheet/index.css" />
    <!-- 引入submit组件 -->
    <link rel="stylesheet" href="../../widget/components/submit/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .page-content {
        overflow: inherit;
        background-color: #fff;
      }
      .exercise-hr {
        width: 100%;
        border-bottom: 1px solid rgba(200, 200, 200, 0.2);
      }
      .header-right {
        width: 1.5rem;
        font-size: 0.24rem;
      }

      .header-title {
        padding: 0 0.2rem;
      }

      .header-right-mode {
        display: inline-block;
        height: 0.48rem;
        width: 1.29rem;
        line-height: 0.48rem;
        text-align: center;
        color: #de2a20;
        text-align: center;
        border: 1px solid rgba(222, 42, 32, 1);
        border-radius: 0.04rem;
      }

      /* 模式按钮样式 */
      .header-right-is-recite {
        color: #fff;
        border: none;
        background-color: rgba(222, 42, 32, 1);
      }

      /* loading遮罩层样式 */
      .exercise-loading-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 20;
      }

      .van-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
      }

      /* 轮播图样式 */
      .exercise-answer-wait {
        height: 100%;
      }
      .van-swipe {
        height: calc(100% - 0.88rem);
        padding-bottom: 0.98rem;
      }

      .van-swipe-item {
        overflow: auto;
        /* padding-bottom: 0.8rem; */
      }
      .exercise-answer-wait-where .van-swipe-item {
        padding-bottom: 1.2rem;
      }

      /* 倒计时样式 */
      .exercise-test-timer {
        padding: 0.59rem 0 0.18rem;
        color: rgb(255, 124, 16);
      }

      .exercise-test-timer-name {
        width: 0.56rem;
        height: 0.56rem;
        margin-right: 0.15rem;
      }
      .exercise-test-timer-name img {
        width: 100%;
        height: 100%;
      }

      .exercise-test-timer-time {
        font-size: 0.26rem;
        font-weight: bold;
        color: rgba(222, 42, 32, 1);
      }

      /* 答题卡样式 */
      .exercise-answer-sheet {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .exercise-answer-sheet-container {
        height: calc(100% - 2.2rem);
        margin-top: 2.2rem;
        overflow: auto;
        padding-bottom: 0.8rem;
        border-radius: 0.2rem 0.2rem 0px 0px;
        background-color: #fff;
      }

      .exercise-answer-sheet-bottom-right,
      .exercise-answer-sheet-bottom-left {
        min-width: 2rem;
      }

      .exercise-answer-sheet-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.8rem;
        background-color: #fff;
        box-shadow: 0 0 0.2rem 0rem rgba(200, 200, 200, 0.4);
      }

      .exercise-answer-right-num {
        margin: 0 0.3rem 0 0.2rem;
        color: rgb(56, 196, 75);
      }

      .exercise-answer-wrong-num {
        color: rgb(252, 78, 78);
      }

      .exercise-answer-clear {
        color: rgba(64, 158, 255, 1);
      }
      .exaercise-clear-icon-img {
        height: 0.32rem;
        width: 0.32rem;
        vertical-align: sub;
      }

      .exercise-answer-sheet-close {
        width: 0.56rem;
        height: 0.56rem;
        margin: 0.32rem auto 0.34rem;
        transform: rotate(-90deg);
        background-image: url('./image/exercise/previous.png');
      }

      .exercise-answer-sheet-bottom-container {
        height: 100%;
        padding: 0 0.29rem;
      }
      .exercise-sheet-right-num {
        margin: 0;
      }
      .exercise-answer-sheet-bottom-where {
        justify-content: space-evenly;
      }

      /* page-bottom样式 */
      .page-bottom {
        height: 0.98rem;
        padding-bottom: 0.1rem;
        font-size: 0.2rem;
        color: rgba(51, 51, 51, 1);
        box-shadow: 0 0 0.2rem 0 rgba(200, 200, 200, 0.5);
        background-color: #fff;
      }

      .page-bottom-center {
        width: 0;
        font-size: 0;
      }

      /* 底部中间部分样式 */
      .exercise-sheet-switch,
      .exercise-collection-switch {
        display: inline-block;
        width: 50%;
        height: 100%;
        font-size: 0.2rem;
        text-align: center;
      }
      .exercise-sheet-switch {
        padding-left: 0.2rem;
        font-size: 0.2rem;
      }
      .exercise-collection-switch {
        padding-right: 0.2rem;
      }
      .exercise-bottom-common {
        display: inline-block;
        width: 33.333333%;
        height: 100%;
        padding: 0;
        text-align: center;
      }
      .exercise-control-container {
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        font-size: 0.24rem;
      }
      .exercise-control-icon-container {
        width: 0.54rem;
        height: 0.54rem;
        margin: 0 auto;
      }
      .exercise-icon-img {
        height: 0.56rem;
        width: 0.56rem;
      }

      /* 上一题、下一题按钮 */

      .exercise-btn-container,
      .exercise-go-container {
        height: 100%;
      }

      .exercise-go-previous,
      .exercise-go-next {
        width: 0.54rem;
        height: 0.54rem;
        margin: 0 auto;
      }
      .exercise-go-previous {
        background-image: url('./image/exercise/previous.png');
      }
      .exercise-go-next {
        background-image: url('./image/exercise/next.png');
      }

      .page-bottom .van-button--default {
        height: 100%;
        border: none;
        font-size: 0.24rem;
        background-color: #fff;
      }

      .van-button--disabled .exercise-go-previous {
        background-image: url('./image/exercise/noprevious.png');
      }
      .van-button--disabled .exercise-go-next {
        background-image: url('./image/exercise/nonext.png');
      }

      .exercise-go-word {
        line-height: normal;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">{{title}}</div>
            <div class="header-right">
              <div
                v-show="(this.where === 0 || this.where === 2) && isShowModelControl"
                class="header-right-mode"
                :class="{'header-right-is-recite':isRecite}"
                @click="changeModel1"
              >
                背题模式
              </div>
              <div
                v-show="this.where === 1 && isShowModelControl"
                class="header-right-mode"
                @click="changeModel2"
              >
                练习模式
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ************************* 内容 *********************** -->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div class="exercise-hr"></div>
        <div
          class="exercise-answer-wait"
          :class="{'exercise-answer-wait-where': this.where === 1 }"
        >
          <!-- 考试模式的倒计时 -->
          <div
            v-show="where===1 && isShowTimer"
            class="flex-wrap flex-justify-center flex-center-wrap exercise-test-timer"
          >
            <div class="exercise-test-timer-name">
              <img src="./image/exercise/time.png" alt="" />
            </div>
            <div class="exercise-test-timer-time">
              {{ time }}
            </div>
          </div>
          <van-swipe
            :show-indicators="false"
            @change="changeIndex"
            ref="swipe"
            :loop="false"
            :duration="durationTime"
          >
            <van-swipe-item v-for="(item, index) of examData" :key="index">
              <zl-subject
                :where="where"
                ref="subject"
                :exam-item-data="item"
                :index="index"
                @answer-to-sheet="answerToSheet"
              ></zl-subject>
            </van-swipe-item>
          </van-swipe>

          <!-- 答题卡 -->
          <div
            v-show="isShowAnswerSheet && afterSubmit"
            class="exercise-answer-sheet"
          >
            <div class="exercise-answer-sheet-container">
              <div
                class="bg-full exercise-answer-sheet-close"
                @click="closeAnsSheet"
              ></div>
              <div>
                <zl-sheet
                  @swipeto="swipe"
                  :exam-data="examData"
                  :parts="parts"
                  :where="where"
                ></zl-sheet>
              </div>
            </div>
            <div v-if="where !== 1" class="exercise-answer-sheet-bottom">
              <div
                class="flex-wrap flex-justify-between flex-center-wrap exercise-answer-sheet-bottom-container"
                :class="{'exercise-answer-sheet-bottom-where':(where !== 0 || isShowModelControl === false)}"
              >
                <div class="exercise-sheet-right-num sheet-right-num">
                  <span class="sheet-right-icon"></span>答对 ({{ rightTotal }})
                </div>
                <div class="exercise-sheet-right-num sheet-wrong-num">
                  <span class="sheet-wrong-icon"></span>答错 ({{ wrongTotal }})
                </div>
                <!-- isShowModelControl === true 由考试模式切换为联系模式时不显示清楚答题记录按钮 -->
                <div
                  v-if="where === 0 && isShowModelControl === true"
                  class="exercise-answer-sheet-bottom-left"
                >
                  <div class="exercise-answer-clear" @click="clearHistory">
                    <img
                      class="exaercise-clear-icon-img"
                      src="./image/exercise/delete.png"
                      alt=""
                    />
                    清除做题记录
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 交卷 -->
          <div v-if="isShowSubmit">
            <zl-submit
              @view-analysis="viewAnalysis"
              @swipeto="swipe"
              @encourage="encourage"
              :exam-data="examData"
              :parts="parts"
              :handle-time-cost="handleTimeCost"
              :query-obj="queryObj"
              :no-judege-score="noJudegeScore"
              :get-encourage-again="canGetEncourage"
              :encourage="encourageTitle"
            >
            </zl-submit>
          </div>
        </div>
      </div>

      <!-- ************************* 脚 *********************** -->
      <div class="flex-wrap flex-justify-between flex-center-wrap page-bottom">
        <!-- 上一题按钮 -->
        <div class="exercise-btn-container">
          <van-button @click="select(0)" :disabled="btn1">
            <div class="exercise-go-container">
              <div class="bg-full exercise-go-previous"></div>
              <p class="exercise-go-word">上一题</p>
            </div>
          </van-button>
        </div>
        <!-- 中间部分 -->
        <div class="flex page-bottom-center">
          <div
            class="exercise-sheet-switch"
            :class="where===1 ? 'exercise-bottom-common' : ''"
          >
            <div class="exercise-control-container" @click="showAnswerSheet">
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/answerSheet.png"
                  alt=""
                />
              </div>
              <span>{{ nowIndex }}/{{ questionNum }}</span>
            </div>
          </div>
          <div
            v-show="where===1"
            class="exercise-bottom-common exercise-submit-switch"
          >
            <div class="exercise-control-container" @click="showSubmit">
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/submit.png"
                  alt=""
                />
              </div>
              <span>交卷</span>
            </div>
          </div>
          <div
            v-show="where !== 2"
            class="exercise-collection-switch"
            :class="where===1 ? 'exercise-bottom-common' :'' "
          >
            <div
              v-show="isCollect"
              class="exercise-control-container"
              @click="collect"
            >
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/collect.png"
                  alt=""
                />
              </div>
              <span>收藏</span>
            </div>
            <div
              v-show="!isCollect"
              class="exercise-control-container"
              @click="collect"
            >
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/collect.png"
                  alt=""
                />
              </div>
              <span>取消收藏</span>
            </div>
          </div>
          <div
            v-show="where===2"
            class="exercise-collection-switch"
            :class="where===1 ? 'exercise-bottom-common' :'' "
          >
            <div
              v-show="isCanRemove"
              class="exercise-control-container"
              @click="removeWrong"
            >
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/deleteWrong.png"
                  alt=""
                />
              </div>
              <span>移除错题</span>
            </div>
            <div v-show="!isCanRemove" class="exercise-control-container">
              <div class="exercise-control-icon-container">
                <img
                  class="exercise-icon-img"
                  src="./image/exercise/deleteWrong.png"
                  alt=""
                />
              </div>
              <span>已移除</span>
            </div>
          </div>
        </div>
        <!-- 下一题按钮 -->
        <div class="exercise-btn-container">
          <van-button @click="select(1)" :disabled="btn2">
            <div class="exercise-go-container">
              <div class="bg-full exercise-go-next"></div>
              <p class="exercise-go-word">下一题</p>
            </div>
          </van-button>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <!-- 引入radio 组件 -->
    <script src="../../widget/components/radio/index.js"></script>
    <!-- 引入checkbox组件 -->
    <script src="../../widget/components/checkbox/index.js"></script>
    <!-- 引入filed组件 -->
    <script src="../../widget/components/field/index.js"></script>
    <!-- 引入sheet组件 -->
    <script src="../../widget/components/sheet/index.js"></script>
    <!-- 引入subject组件 -->
    <script src="../../widget/components/subject/index.js"></script>
    <!-- 引入submit组件 -->
    <script src="../../widget/components/submit/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Collapse 组件
      Vue.use(vant.Collapse).use(vant.CollapseItem)
      // 注册 Radio 组件
      Vue.use(vant.RadioGroup)
      Vue.use(vant.Radio)
      // 注册 Checkbox 组件
      Vue.use(vant.Checkbox).use(vant.CheckboxGroup)
      // 注册 Field 组件
      Vue.use(vant.Field)
      // 注册 Layout 组件
      Vue.use(vant.Row).use(vant.Col)
      // 注册 Dialog 组件
      Vue.use(vant.Dialog)
      // 注册 Toast 组件
      Vue.use(vant.Toast)
      Vue.use(vant.Loading)

      new Vue({
        el: '#app',
        components: {
          'zl-subject': subject,
          'zl-sheet': sheet,
          'zl-submit': submit
        },
        data: {
          // 是否显示loading
          isShowZLLoading: true,
          // 试卷id
          id: '',
          // 未处理的题
          parts: [],
          // 处理后的所有题
          examData: [],
          // 题的总数量
          questionNum: '',
          // 判断是从练习页面跳转过来还是从考试页面跳转过来 0为从练习页面来 1为从考试页面来 2为从错题、收藏练习而来
          where: '',
          // 判断是否有历史记录
          hasHistory: true,
          // 存储历史记录
          theHistory: '',
          // 最上面导航栏的内容
          title: '',
          // 是否背题和练习模式 控制切换按钮的样式
          isRecite: false,
          // 在考试模式下是否显示模式切换按钮
          isShowModelControl: true,
          // 题的判断
          nowIndex: 1,
          btn1: true,
          btn2: false,
          // 是否显示答题卡
          isShowAnswerSheet: false,
          // 交卷后不显示
          afterSubmit: true,
          // 是否显示交卷
          isShowSubmit: false,
          // 是否显示倒计时
          isShowTimer: true,
          // 考试时间
          examinationTime: '',
          // 考试时的倒计时
          time: '',
          // 考试用时 s
          timeCost: 0,
          // 处理后的考试用时
          handleTimeCost: '',
          // 倒计时的定时器
          interval: '',
          // 轮播图轮播时间
          durationTime: 500,
          // 控制收藏按钮
          showCollect: true,
          // 控制移除错题按钮
          showRemove: true,
          // 是否从收藏页面跳来
          isFromCollect: '',
          queryObj: '',
          csobj: {},
          // 不计入正误的分数
          noJudegeScore: 0,
          canGetEncourage: true,
          encourageTitle: ''
        },
        computed: {
          isCollect() {
            if (this.examData.length > 0) {
              return Number(this.examData[this.nowIndex - 1].iscollect) === 1
                ? false
                : true
            } else {
              return false
            }
          },
          isCanRemove() {
            if (this.examData.length > 0) {
              return this.examData[this.nowIndex - 1].isCanRemove
            } else {
              return true
            }
          },
          rightTotal() {
            let num = 0
            for (let item of this.parts) {
              num += item.rightNum
            }
            return num
          },
          wrongTotal() {
            let num = 0
            for (let item of this.parts) {
              num += item.wrongNum
            }
            return num
          }
        },
        watch: {},
        methods: {
          encourage(value) {
            this.encourageTitle = value
          },
          //  返回按钮
          goBack() {
            if (this.where == 2 || this.where == 3) {
              location.replace(
                `./wrongTest.html?typeid=${this.csobj.typeid}&&cateid=${this.csobj.cateid}&&type=${this.csobj.type}`
              )
              return
            }
            window.history.back(-1)
          },
          // 练习和错题模式时 切换为背题模式
          changeModel1() {
            this.isRecite = !this.isRecite
            const refs = this.$refs.subject
            for (let i = 0; i < refs.length; i++) {
              // isRecite用来判断背题模式是否关闭
              if (this.isRecite) {
                if (refs[i].$refs.radio) {
                  refs[i].$refs.radio.reciteModel(1)
                }
                if (refs[i].$refs.checkbox) {
                  refs[i].$refs.checkbox.reciteModel(1)
                }
                if (refs[i].$refs.field) {
                  refs[i].$refs.field.reciteModel(1)
                }
              } else {
                if (refs[i].$refs.radio) {
                  refs[i].$refs.radio.reciteModel(2)
                }
                if (refs[i].$refs.checkbox) {
                  refs[i].$refs.checkbox.reciteModel(2)
                }
                if (refs[i].$refs.field) {
                  refs[i].$refs.field.reciteModel(2)
                }
              }
            }
          },
          // 考试时 切换为练习模式 将选择了答案的题进行判断对错且加上相应样式
          changeModel2() {
            // 让用户确认是否切换模式
            this.$dialog
              .confirm({
                message: '切换模式后将不能继续当前考试，确认切换？'
              })
              .then(() => {
                // on confirm
                // 清楚考试模式的倒计时
                clearInterval(this.interval)
                const refs = this.$refs.subject
                this.isShowModelControl = false
                this.where = 0
                // TODO:
                this.$nextTick(() => {
                  for (let i = 0; i < refs.length; i++) {
                    if (refs[i].$refs.radio) {
                      refs[i].$refs.radio.exerciseModel()
                    }
                    if (refs[i].$refs.checkbox) {
                      refs[i].$refs.checkbox.exerciseModel()
                    }
                    if (refs[i].$refs.field) {
                      refs[i].$refs.field.exerciseModel()
                    }
                  }
                })
              })
              .catch(() => {
                // on cancel
                return
              })
          },
          // 轮播
          changeIndex(index) {
            this.nowIndex = index + 1
            this.btnDisabled()
            document.getElementsByClassName('van-swipe-item')[
              index
            ].scrollTop = 0
          },
          // 上一题 下一题 按钮事件
          select(i) {
            if (i == 0) {
              this.nowIndex -= 1
              this.$refs.swipe.swipeTo(this.nowIndex - 1)
            }
            if (i == 1) {
              this.$refs.swipe.swipeTo(this.nowIndex)
              this.nowIndex += 1
            }
            // 按钮禁用判断
            this.btnDisabled()
          },
          // 按钮禁用判断
          btnDisabled() {
            if (this.nowIndex <= 1) {
              this.btn1 = true
              this.btn2 = false
            }
            if (this.nowIndex >= this.questionNum) {
              this.btn1 = false
              this.btn2 = true
            }
            if (1 < this.nowIndex && this.nowIndex < this.questionNum) {
              this.btn1 = false
              this.btn2 = false
            }
          },
          // 显示答题卡
          showAnswerSheet() {
            this.isShowAnswerSheet = true
            if (this.afterSubmit === false) {
              this.isShowSubmit = true
            }
          },
          // 关闭答题卡
          closeAnsSheet() {
            this.isShowAnswerSheet = false
          },
          // 清除答题记录
          clearHistory() {
            this.$dialog
              .confirm({
                title: '提示',
                message: `确认清楚做题记录?`
              })
              .then(() => {
                this.examData.forEach((value, index, arr) => {
                  value.historyStyle = 'undone'
                  this.$set(arr, index, value)
                })
                this.parts.forEach((value, index, arr) => {
                  value.rightNum = 0
                  value.wrongNum = 0
                  this.$set(arr, index, value)
                })
                examService.clearHistory({ papid: this.id }).then(res => {})
                this.$toast('清除成功')
                this.saveExam()

                const refs = this.$refs.subject
                for (let i = 0; i < refs.length; i++) {
                  if (refs[i].$refs.radio) {
                    refs[i].$refs.radio.clearHistory()
                  }
                  if (refs[i].$refs.checkbox) {
                    refs[i].$refs.checkbox.clearHistory()
                  }
                  if (refs[i].$refs.field) {
                    refs[i].$refs.field.clearHistory()
                  }
                }
              })
              .catch(() => {
                // on cancel
              })
          },
          // 答题卡触发轮播图跳转 type为1时则为交卷后答题卡触发的
          swipe(index, type) {
            if (type === 1) {
              this.isShowSubmit = false
              this.viewAnalysis(1)
            }
            this.durationTime = 0
            this.$refs.swipe.swipeTo(index)
            this.isShowAnswerSheet = false
            this.changeIndex(index)
            // 按钮禁用判断
            this.btnDisabled()
            setTimeout(() => {
              this.durationTime = 500
            }, 150)
          },
          // 收藏按钮事件
          collect() {
            const collectObj = {
              quesid: this.examData[this.nowIndex - 1].id,
              papid: this.id
            }
            const item = this.examData[this.nowIndex - 1]
            if (item.itemid !== undefined) {
              collectObj.itemid = item.itemid
            }
            if (Number(item.iscollect) === 1) {
              item.iscollect = 0
              this.$toast('取消收藏成功')
              examService.removeCollect(collectObj).then(res => {
                if (!res.code) {
                  this.$set(this.examData, this.nowIndex - 1, item)
                } else {
                }
              })
            } else {
              item.iscollect = 1
              this.$toast('收藏成功')
              examService.addCollect(collectObj).then(res => {
                if (!res.code) {
                  this.$set(this.examData, this.nowIndex - 1, item)
                } else {
                }
              })
            }
            if (this.where === 0 || this.where === 1) {
              this.saveExam()
            }
          },
          // 移除错题按钮
          removeWrong() {
            const thisExam = this.examData[this.nowIndex - 1]
            const removeWrongObj = {
              papid: this.id,
              quesid: thisExam.id
            }
            if (thisExam.itemid !== undefined) {
              removeWrongObj.itemid = thisExam.itemid
            }
            examService.removeWrong(removeWrongObj).then(res => {
              if (!res.code) {
                thisExam.isCanRemove = false
                this.$set(this.examData, this.nowIndex - 1, thisExam)
                this.$toast('移除错题成功')
              } else {
                this.$toast('错误！稍后再试')
              }
            })
          },
          // 交卷按钮事件 how为1时 表示从考试时间到了 定时器触发的
          showSubmit(how) {
            let num = 0
            const $this = this
            // 检查答案
            function check() {
              let marksarr = ''
              for (let i in $this.examData) {
                const item = $this.examData[i]
                // 选择了答案
                if (item.hasOwnProperty('selectResult')) {
                  // 此题是单选题
                  // 此变量用来存这道题的对错
                  let answerResult = ''
                  // 得分
                  let getscore = 0
                  // 扣分
                  let deductscore = 0
                  // 不计正误的分支
                  let nojudegescore = 0
                  if (item.typeid === 1) {
                    // TODO: 需要把分数传进去， 然后通过判断函数里面的方法将分数反回来
                    const obj1 = {
                      answer: item.answer[0],
                      selectAnswer: item.selectResult,
                      score: item.score,
                      pointrules: item.pointrules
                    }
                    const {
                      answerStatu,
                      getScore,
                      deductScore,
                      noJudegeScore
                    } = window.radioCheck(obj1)
                    answerResult = answerStatu
                    getscore = getScore
                    deductscore = deductScore
                    nojudegescore = noJudegeScore
                  }
                  // 此题是多选题
                  if (item.typeid === 2) {
                    const obj2 = {
                      answer: item.answer,
                      selectAnswer: item.selectResult,
                      score: item.score,
                      pointrules: item.pointrules
                    }
                    const {
                      answerStatu,
                      getScore,
                      deductScore,
                      noJudegeScore
                    } = window.checkboxCheck(obj2)
                    answerResult = answerStatu
                    getscore = getScore
                    deductscore = deductScore
                    nojudegescore = noJudegeScore
                  }
                  // 此题为简答题
                  if (item.typeid === 4) {
                    const obj3 = {
                      // answer: item.answer,
                      // selectAnswer: item.selectResult,
                      score: item.score,
                      pointrules: item.pointrules
                    }
                    const {
                      answerStatu,
                      getScore,
                      deductScore,
                      noJudegeScore
                    } = window.fieldCheck(obj3)
                    answerResult = answerStatu
                    getscore = getScore
                    deductscore = deductScore
                    nojudegescore = noJudegeScore
                  }
                  item.historyStyle = answerResult
                  $this.$set($this.examData, i, item)

                  // 不计入正误的分值
                  $this.noJudegeScore += nojudegescore

                  // 判断出是第几部分的 然后修改相对应的做对题数
                  let partsNum = item.partsNum
                  let partsItem = $this.parts[partsNum]
                  partsItem.getScore = partsItem.getScore + getscore
                  partsItem.deductScore = partsItem.deductScore + deductscore
                  switch (answerResult) {
                    case 'right':
                      partsItem.rightNum = partsItem.rightNum + 1
                      break
                    case 'wrong':
                      partsItem.wrongNum = partsItem.wrongNum + 1
                      break
                    case 'noJudge':
                      break
                  }
                  $this.$set($this.parts, partsNum, partsItem)
                  // 如果考试时这道题做错了 则将这道题加入错题库
                  if (answerResult === 'wrong') {
                    let string = `${item.id}|0|2`
                    marksarr = marksarr + string + ','
                  }
                }
              }
              // 将错题集合发送给服务器
              const markMultipleObj = {
                papid: $this.id,
                ids: marksarr == '' ? '' : marksarr.slice(0, -1)
              }
              if (markMultipleObj.ids === '') {
                return
              }
              examService.addMarkMultiple(markMultipleObj).then(res => {})
            }
            if (how === 1) {
              check()
              this.isShowSubmit = true
              // 清除考试模式的倒计时
              clearInterval(this.interval)
              this.afterSubmit = false
            } else {
              for (let i in this.examData) {
                const item = this.examData[i]
                if (!item.hasOwnProperty('selectResult')) {
                  num++
                }
              }
              if (num !== 0) {
                this.$dialog
                  .confirm({
                    message: `当前还有${num}题未做，确认提交？`
                  })
                  .then(() => {
                    // on confirm
                    this.isShowSubmit = true
                    // 清除考试模式的倒计时
                    clearInterval(this.interval)
                    this.afterSubmit = false
                    check()
                  })
                  .catch(() => {
                    // on cancel
                  })
              }
              if (num === 0) {
                this.$dialog
                  .confirm({
                    message: `请仔细检查后交卷`
                  })
                  .then(() => {
                    // on confirm
                    this.isShowSubmit = true
                    // 清楚考试模式的倒计时
                    clearInterval(this.interval)
                    this.afterSubmit = false
                    check()
                  })
                  .catch(() => {
                    // on cancel
                  })
              }
            }
          },
          // 点击查看解析时触发 type有值传入且为1的时候 就是交卷的答题卡上面的题触发的
          viewAnalysis(type) {
            this.isShowSubmit = false
            this.isShowModelControl = false
            this.where = 0
            this.canGetEncourage = false
            const refs = this.$refs.subject
            this.$nextTick(() => {
              for (let i = 0; i < refs.length; i++) {
                if (refs[i].$refs.radio) {
                  refs[i].$refs.radio.exerciseModel()

                  refs[i].$refs.radio.reciteModel(3)
                }
                if (refs[i].$refs.checkbox) {
                  refs[i].$refs.checkbox.exerciseModel()
                  refs[i].$refs.checkbox.reciteModel(1)
                }
                if (refs[i].$refs.field) {
                  refs[i].$refs.field.exerciseModel()
                  refs[i].$refs.field.reciteModel(1)
                }
              }
            })

            if (type === 1) {
              return
            }
            this.swipe(0)
          },

          // 答题后把信息传给答题卡时触发
          answerToSheet(obj) {
            const { index, answerStatu, selectResult } = obj
            let item = this.examData[index]
            // 判断出是第几部分的 然后修改相对应的做对题数
            const markObj = {}
            let partsNum = item.partsNum
            let partsItem = this.parts[partsNum]
            switch (answerStatu) {
              case 'right':
                markObj.typetag = 1
                if (
                  item.historyStyle === undefined ||
                  item.historyStyle === 'undone'
                ) {
                  partsItem.rightNum = partsItem.rightNum + 1
                } else {
                  if (item.historyStyle !== 'right') {
                    partsItem.rightNum = partsItem.rightNum + 1
                    partsItem.wrongNum = partsItem.wrongNum - 1
                  }
                }
                break
              case 'wrong':
                markObj.typetag = 2
                if (
                  item.historyStyle === undefined ||
                  item.historyStyle === 'undone'
                ) {
                  partsItem.wrongNum = partsItem.wrongNum + 1
                } else {
                  if (item.historyStyle !== 'wrong') {
                    partsItem.wrongNum = partsItem.wrongNum + 1
                    partsItem.rightNum = partsItem.rightNum - 1
                  }
                }
                break
              case 'noJudge':
                markObj.typetag = 0
                break
            }
            this.$set(this.parts, partsNum, partsItem)

            item.historyStyle = answerStatu
            item.selectResult = selectResult
            this.$set(this.examData, index, item)

            // 根据答题对错将信息反馈给服务器
            markObj.papid = this.id
            markObj.id = this.examData[index].id
            if (this.examData[index].hasOwnProperty('itemid')) {
              markObj.itemid = this.examData[index].itemid
            }
            const queryObj = utils.getQuery(location.href)
            if (Number(queryObj.where) === 0) {
              // 将练习模式的答案对错反馈给服务器
              examService.addMarkOne(markObj).then(res => {})
              this.saveExam()
            }
          },

          // 存试卷的函数
          saveExam() {
            const localData = {
              examData: this.examData,
              parts: this.parts,
              paper_time: this.examinationTime,
              when: Date.now()
            }
            let localId = 'id' + this.id
            const objtest = {}
            objtest[localId] = JSON.stringify(localData)
            setLStorageObj(objtest)
          },
          // 处理试卷
          dealExam() {
            const $this = this
            // id:试卷id title:试卷名字 chpterid:章节id paper_time:考试时间 scoresum:总分数 isfree:是否免费 parts:题 //TODO： 总题数需要从新计算
            const {
              id,
              title,
              chapterid,
              paper_time,
              scoresum,
              isfree,
              parts
            } = $this.resData
            // 将考试时间存起
            $this.examinationTime = paper_time
            // 将未处理的题存起来
            $this.parts = parts
            // 将parts里面的题放入数组中
            const questionList = []
            for (let index in parts) {
              // 对的题数
              if (!parts[index].rightNum) {
                parts[index].rightNum = 0
              }
              // 错的题数
              if (!parts[index].wrongNum) {
                parts[index].wrongNum = 0
              }
              // 得分
              parts[index].getScore = 0
              // 扣分
              parts[index].deductScore = 0
              for (let cateItem of parts[index].catequesdetails) {
                // 如果不是综合题 则直接放入问题列表中
                if (cateItem.typeid !== 5) {
                  // 用来判断是否有题干
                  cateItem.isComplex = false
                  // 在错题模式中  一开始这道题可以被移除
                  cateItem.isCanRemove = true
                  // 这道题属于哪一部分
                  cateItem.partsNum = index
                  cateItem.partsTitle = parts[index].catetitle
                  questionList.push(cateItem)
                }
                // 如果是综合题
                if (cateItem.typeid === 5) {
                  // 综合题的题干
                  const describe = cateItem.describe
                  // 综合题的id
                  const fId = cateItem.id
                  for (let i in cateItem.crds) {
                    let questionItem = cateItem.crds[i]
                    // 是否属于综合题的小题
                    questionItem.isComplex = true
                    // 小题的编号
                    questionItem.smallIndex = Number(i)
                    // 将综合题题干存入
                    questionItem.topic = describe
                    questionItem.partsTitle = parts[index].catetitle
                    // 将综合题id存入 以供错题 收藏用
                    questionItem.id = fId
                    if (this.where !== 3) {
                      questionItem.iscollect = questionItem.item_iscollect
                    }
                    // 在错题模式中  一开始这道题可以被移除
                    questionItem.isCanRemove = true
                    // 这道题属于哪一部分
                    questionItem.partsNum = index
                    questionList.push(questionItem)
                  }
                }
              }
            }
            // 将历史记录清除 每次从服务器取 防止在不同手机做相同的试卷的题
            for (let item of questionList) {
              item.historyStyle = 'undone'
              delete item.selectResult
            }
            for (let items of this.parts) {
              items.rightNum = 0
              items.wrongNum = 0
            }
            $this.examData = questionList
            // 总题数
            $this.questionNum = questionList.length
            if (questionList.length === 1) {
              this.btn2 = true
            }
            $this.showCollect = false

            // 关闭遮罩层
            $this.isShowZLLoading = false
            // 开始考试的倒计时
            if ($this.where === 1) {
              const startTime = window.calcTime($this.examinationTime * 60)
              $this.time = startTime
              let timeCost = 1
              $this.interval = setInterval(() => {
                let examinationTime = $this.examinationTime * 60 - timeCost
                let processTime = window.calcTime(examinationTime)
                $this.time = processTime
                timeCost++
                $this.timeCost = timeCost
                $this.handleTimeCost = window.calcTime(timeCost - 1)
                setTimeout(() => {
                  if ($this.examinationTime * 60 < timeCost) {
                    clearInterval($this.interval)
                    $this.$dialog
                      .alert({
                        message: '答题时间到，请确认交卷'
                      })
                      .then(() => {
                        // on close
                        $this.showSubmit(1)
                      })
                  }
                }, 1000)
              }, 1000)
            }
          },

          // 获取历史记录
          getHistory() {
            const $this = this
            examService.getExamHistory({ id: this.id }).then(data => {
              const resHistory = data
              function switchCheck(marktype, examDataItem, index) {
                // 判断出是第几部分的 然后修改相对应的做对题数
                let partsNum = examDataItem.partsNum
                let partsItem = this.parts[partsNum]
                switch (Number(marktype)) {
                  case 1:
                    // 记录做题状态
                    examDataItem.historyStyle = 'right'
                    // 记录对错的数量
                    partsItem.rightNum = partsItem.rightNum + 1
                    break
                  case 2:
                    examDataItem.historyStyle = 'wrong'
                    partsItem.wrongNum = partsItem.wrongNum + 1
                    break
                  case 0:
                    examDataItem.historyStyle = 'noJudge'
                    break
                }
                $this.$set($this.examData, index, examDataItem)
                $this.$set($this.parts, partsNum, partsItem)
              }
              if (resHistory.length !== 0) {
                let maxIndex = 0
                for (let item of resHistory) {
                  // 将历史记录中的答案对错信息转换出来 把上次的对错信息显示在答题卡上
                  let marktype = item.marktype
                  for (let index in $this.examData) {
                    // 不是子问题
                    const examDataItem = $this.examData[index]
                    if (item.itemid === 0) {
                      if (item.quesid === $this.examData[index].id) {
                        if (index > maxIndex) {
                          maxIndex = index
                        }
                        switchCheck.call($this, marktype, examDataItem, index)
                      }
                    }
                    // 是子问题
                    if (item.itemid !== 0) {
                      if (item.itemid === $this.examData[index].itemid) {
                        if (index > maxIndex) {
                          maxIndex = index
                        }
                        switchCheck.call($this, marktype, examDataItem, index)
                      }
                    }
                  }
                }
                $this.theHistory = Number(maxIndex)
                if ($this.theHistory > 0) {
                  $this.$dialog
                    .confirm({
                      message: `跳转到上次做题进度第${$this.theHistory + 1}题？`
                    })
                    .then(() => {
                      // on confirm
                      $this.durationTime = 0
                      $this.$refs.swipe.swipeTo($this.theHistory)
                      $this.changeIndex($this.theHistory)
                      // 按钮禁用判断
                      $this.btnDisabled()
                      setTimeout(() => {
                        $this.durationTime = 500
                      }, 50)
                    })
                    .catch(() => {
                      // on cancel
                    })
                }
              }
            })
          },

          // 没有历史记录则请求服务器
          requestData() {
            this.get
              .call(this)
              .then(res => {
                this.resData = res
                this.isShowZLLoading = false
                this.dealExam()
                // 练习模式和考试模式将试卷存起来
                if (this.where === 0 || this.where === 1) {
                  this.saveExam()
                }
                // 获取试卷历史记录 并提示是否跳转
                if (this.where === 0) {
                  // 如果是从收藏页面跳转过来的 也不进行答题记录读取
                  if (this.wherr === 3) {
                    return
                  }
                  // 获取历史记录
                  this.getHistory()
                }
              })
              .catch(err => {
                // TODO: 错误没有处理
              })
          }
        },
        beforeCreate() {},
        created() {
          const queryObj = utils.getQuery(location.href)
          this.where = Number(queryObj.where)
          this.id = queryObj.id
          this.title = queryObj.title
          // 用来给收藏和错题返回用的
          try {
            this.csobj = JSON.parse(queryObj.obj)
          } catch (err) {}

          // 用来判断是不是从收藏那里跳转过来的
          this.isFromCollect = Number(queryObj.collect)
          // 将参数存起来 传给试卷  点击再考一次时跳回此页面
          this.queryObj = queryObj.queryObj
          // 请求试卷信息
          const key = 'id' + this.id
          // 将内存中的试卷取出来
          const localStrorageExam = getLStorageObj([key])[key]
          this.get = function() {
            if (this.where === 0 || this.where === 1) {
              return examService.getExamInfo({ id: queryObj.id })
            }
            if (this.where === 2) {
              return examService.getExamWrong({ papid: this.id })
            }
            if (this.where === 3) {
              return examService.getExamCollect({ papid: this.id })
            }
          }

          // 除了收藏和错题都判断存有历史记录没有
          if (this.where === 0 || this.where === 1) {
            // 卷子有历史记录则不访问了
            if (localStrorageExam) {
              this.resData = JSON.parse(localStrorageExam)
              if (Date.now() - this.resData.when > 60000) {
                this.requestData()
                return
              }
              this.dealExam()
              this.saveExam()
              // 获取历史记录
              if (this.where === 0) {
                this.getHistory()
              }
            } else {
              // 没存有试卷的时候直接请求服务器
              this.requestData()
            }
          } else {
            // 错题和收藏直接请求服务器
            this.requestData()
          }
        },
        mounted() {}
      })
    </script>
  </body>
</html>
